<template>
  <div>
    <div style="width:800px;margin:30px auto">
      <el-steps :active="active" finish-status="success">
        <el-step title="用户名"></el-step>
        <el-step title="验证密保1"></el-step>
        <el-step title="验证密保2"></el-step>
        <el-step title="验证密保3"></el-step>
        <el-step title="修改密码"></el-step>
      </el-steps>
    </div>
    <div class="box" v-if="active==0">
      <h3>请输入您的用户名</h3>
      <el-input v-model="loginName" placeholder="请输入内容"></el-input>
    </div>
    <div class="box" v-if="active>0&&active<4">
      <h3>请输入您的密保</h3>
      <h4>{{quetions[active-1].question}}</h4>
      <el-input v-model="mibao" placeholder="请输入内容"></el-input>
    </div>
    <div style="width:520px;margin:0 auto;" v-if="active ==4">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="新的密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button style="width:200px;margin:20px 0 0 665px" size="big" type="success" @click="next">确定</el-button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      loginName: '',
      mibao: '',
      ruleForm: {
        pass: '',
        checkPass: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      },
      active: 0,
      quetions: [],
      question: '',
      id: 0
    }
  },
  methods: {
    ...mapActions({
      findPass: 'Logins/findPass',
      setPass: 'Logins/setPass'
    }),
    async next() {
      if (this.active == 0) {
        const res = await this.findPass({ loginName: this.loginName })
        if (res.data.data.resultes.length > 0) {
          this.quetions = JSON.parse(res.data.data.resultes[0].question)
          this.id = res.data.data.resultes[0].id
          this.active++
        }
        return
      }
      if (this.active > 0 && this.active < 4) {
        if (this.mibao == this.quetions[this.active - 1].answer) {
          this.active++
          this.mibao = ''
        } else {
          this.$message.error('密保输入错误');
        }
        return
      }
      if (this.active == 4) {
        const res = await this.setPass({ pass: this.ruleForm.pass, id: this.id })
        if (res.data.success) {
          this.$message({
            message: '恭喜你，密码找回成功',
            type: 'success'
          });
        }
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 600px;
  margin: 200px auto 0;
}

h3 {
  text-align: center;
  margin: 20px 0;
}
</style>